<template>
  <div class='SearchView'>
    <div class='searchTop'>
      <svg class='icon' aria-hidden='true' @click="$router.go(-1)">
        <use xlink:href='#icon-zuojiantou' />
      </svg>
      <input class='search' v-model="placeHolder" @keydown.enter="setHistory"/>
    </div>
    <img class='banner' src="../assets/img/swiper1.jpg" alt="">
    <div class='history'>
      <div class='left'>
        <span>历史</span>
      </div>
      <div class='content'>
        <el-tag v-for='(item,i) in historyList' :key='i' effect='dark' @click="searchHistory(item.value)">{{ item.value }}</el-tag>
      </div>
      <div class='right'>
        <svg class='icon' aria-hidden='true' @click="clear">
          <use xlink:href='#icon-lajitong' />
        </svg>
      </div>
    </div>
     <div class="SearchContent">
    <div class="list">
      <div class="item" v-for="(item,i) in searchSongs" :key="item.id" @click="changeIndex(i)">
        <div class="left">
          <div class="index">{{i+1}}</div>
          <div class="content">
            <div class="title" v-if="item.name">{{item.name}}</div>
            <div class="other">
              <div class="author" v-if="item.artists">{{item.artists[0].name}}</div>
              <div class="album" v-if="item.alias">{{item.alias[0]}}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <svg class='icon' aria-hidden='true' style="margin-right: 0.3rem" v-if="item.mv">
            <use xlink:href='#icon-bofang1' />
          </svg>
          <svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-danlieliebiao' />
          </svg>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import {getSearchValue} from '../api/index'
export default {
  data(){
    return {
      placeHolder: '陈奕迅',
      historyList: [],
      searchSongs: []
    }
  },
  methods: {
    setHistory() {
      let obj = {value: this.placeHolder}
      let j = this.historyList.some((item)=>{
        if (item.value === obj.value) {
          return true
        }
      })
      if (!j) {
        this.historyList.unshift(obj)
        this.saveHistoryList()
      }
      this.setsearchSongs(this.placeHolder)
    },
    searchHistory(value){
      this.placeHolder = value
      this.setHistory()
    },
    saveHistoryList(){
      window.localStorage.setItem('historyList',JSON.stringify(this.historyList))
    },
    clear(){
      this.historyList.shift()
      this.saveHistoryList()
    },
    // 获取搜索结果
    async setsearchSongs(value){
      const {data:res} = await getSearchValue(value)
      console.log(res.result.songs);
      this.searchSongs = res.result.songs
      res.result.songs.forEach((item)=>{
        item.al = item.album
        item.al.picUrl = item.al.artist.picUrl
        item.ar = item.artists
      })
      this.$store.state.playlist = res.result.songs
    },
    changeIndex(i){
      this.$store.state.playCurrentIndex = i
      console.log('当前播放第几首歌: '+this.$store.state.playCurrentIndex);
      this.$nextTick(()=>{
       this.$store.state.show = true
      })
    },
    setPlay(){}
  },
  mounted() {
    if(window.localStorage.getItem('historyList') !== null){
      this.historyList = JSON.parse(window.localStorage.getItem('historyList'))
    }
  },
  updated(){
      console.log(this.placeHolder);
      console.log(this.historyList);
  },
  setup() {
    return {}
  }
};
</script>

<style lang="less" scoped>
.searchTop {
  display: flex;
  width: 7.5rem;
  height: 0.8rem;
  // background-color: pink;
  padding: 0 0.2rem;
  align-items: center;
  .icon {
    width: 0.6rem;
    height: 0.6rem;
  }
  .search {
    flex: 1;
    margin-left: 0.1rem;
    border: 0;
    height: 0.8rem;
    outline: none;
    font-size: 0.3rem;
    border-bottom: 1px solid #ccc;
  }
}
.banner {
  width: 7.5rem;
  padding: 0.2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 0.3rem;
}
.history {
  width: 7.5rem;
  height: 1rem;
  padding: 0.2rem 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    span {
      font-size: 0.3rem;
      font-weight: 600;
      margin-right: 0.15rem;
    }
  }
  .content {
    flex: 1;
    height: 1rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    // background-color: pink;
    .el-tag {
      // width: 0.8rem;
      margin: 0.1rem;
      padding: 0.2rem;
      border: 0;
      background-color: #ccc;
    }
  }
  .right {
    .icon {
      width: 0.4rem;
      height: 0.6rem;
    }
  }
}
.SearchContent {
  width: 7.5rem;
  padding: 0 0.2rem;
  margin-top: 0.8rem;
  background-color: #fff;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  .list {
    padding-bottom: 1rem;
    .item {
      width: 7.5rem;
      height: 1rem;
      padding: 0.1rem 0.4rem 0.1rem 0.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        .index {
          width: 0.8rem;
          height: 0.8rem;
          line-height: 0.8rem;
          font-size: 0.35rem;
          color: #ccc;
          // text-align: center;
        }
        .content {
          width: 4.5rem;
          .title {
            font-size: 0.3rem;
            font-weight: 600;
            margin-bottom: 0.1rem;
            overflow:hidden;
	          text-overflow:ellipsis;
	          white-space:nowrap
          }
          .other {
            display: flex;
            font-size: 0.2rem;
            color: #666;
            .album {
              margin-left: 0.2rem;
            }
          }
        }
      }
      .right {
        .icon {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }
}
</style>